<template>
  <div class="app-container">
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-form :model="form" ref="formRef" label-width="130px">
            <el-form-item label="箱ID">
              <el-input v-model="form.boxId" @input="boxIdChange"></el-input>
            </el-form-item>
            <el-form-item label="入库单号">
              <el-input v-model="form.orderNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="关联单号">
              <el-input v-model="form.saleNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="客户料号">
              <el-input v-model="form.materialNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="批次号">
              <el-input v-model="form.batchNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="form.total" readonly></el-input>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <div style="width: 410px">
            <el-alert :type="retOpt" show-icon :closable="false" :title="titleName" :description="retMessage"></el-alert>
          </div>
        </el-row>
      </el-col>
      <el-col :span="16">
        <el-row>
          <el-button type="primary" :loading="loading" :disabled="reciveDisabled" @click="reciveSubmit">回传客户</el-button>
          <el-button type="primary" :loading="loading" :disabled="inDbDisabled" @click="submitForm">出货</el-button>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-table v-loading="loading" :data="storeDataList" border height="620">
            <el-table-column prop="workOrder" label="工单号" align="center" width="140" v-if="columns.showColumn('workOrder')" />
            <el-table-column prop="inBoxId" label="内箱号" align="center" v-if="columns.showColumn('inBoxId')" />
            <el-table-column prop="materialNo" label="客户料号" align="center" v-if="columns.showColumn('materialNo')" />
            <el-table-column prop="productId" label="产品Id" align="center" v-if="columns.showColumn('productId')" />
            <el-table-column prop="batchNo" label="批次号" align="center" width="110" v-if="columns.showColumn('batchNo')" />
            <el-table-column prop="createTime" label="入库时间" align="center" v-if="columns.showColumn('createTime')" />
          </el-table>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="shipment">
import { querylist, add, recive } from '@/api/storein/shipment'
import _ from 'lodash'
const { proxy } = getCurrentInstance()
const columns = ref([
  { visible: true, align: 'center', type: '', prop: 'inBoxId', label: '内箱号' },
  { visible: true, align: 'center', type: '', prop: 'productId', label: '产品Id' },
  { visible: true, align: 'center', type: '', prop: 'materialNo', label: 'FGCODE' },
  { visible: true, align: 'center', type: '', prop: 'workOrder', label: '工单号' },
  { visible: true, align: 'center', type: '', prop: 'batchNo', label: '批次号' },
  { visible: true, align: 'center', type: '', prop: 'createTime', label: '入库时间' }
])
const formRef = ref()
const state = reactive({
  form: {},
  storeDataList: [],
  inDbDisabled: true,
  reciveDisabled: true,
  titleName: '提示',
  retOpt: 'info', //info//success//error
  retMessage: '',
  loading: false
})

const { form, storeDataList, inDbDisabled, reciveDisabled, retOpt, titleName, retMessage, loading } = toRefs(state)

/** boxid变更事件 state=0成功、=1提示、=2错误*/
const boxIdChange = _.debounce(() => {
  reciveDisabled.value = true
  inDbDisabled.value = true
  if (form.value.boxId) {
    querylist({ ...form.value }).then((res) => {
      storeDataList.value = res.data.data
      if (res.data.addbtn != 3) {
        form.value.orderNo = res.data.storeinBoxProduct.orderNo
        form.value.total = res.data.data.length
        form.value.materialNo = res.data.materialNo
        form.value.saleNo = res.data.storeinBoxProduct.saleNo
        form.value.batchNo = res.data.storeinBoxProduct.batchNo
      }
      retMessage.value = res.data.message
      showButton(res.data)
    })
  }
}, 500)

function showButton(data) {
  if (data.state == 1) {
    retOpt.value = 'info'
    titleName.value = '提示'
  } else if (data.state == 0) {
    retOpt.value = 'success'
    titleName.value = '成功'
  } else {
    retOpt.value = 'error'
    titleName.value = '错误'
  }
  if (data.addbtn == 3) {
    reciveDisabled.value = true
    inDbDisabled.value = true
  } else if (data.passbackFlag == 0) {
    reciveDisabled.value = false
    inDbDisabled.value = true
  } else if (data.addbtn == 0) {
    reciveDisabled.value = false
    inDbDisabled.value = true
  } else {
    reciveDisabled.value = true
    inDbDisabled.value = false
  }
}
function submitForm() {
  loading.value = true
  add({ ...form.value })
    .then((res) => {
      showButton(res.data)
      retMessage.value = res.data.message
      loading.value = false
    })
    .finally((res) => {
      retMessage.value = res.data
      loading.value = false
    })
}
function reciveSubmit() {
  loading.value = true
  recive({ ...form.value })
    .then((res) => {
      showButton(res.data)
      retMessage.value = res.data.message
      loading.value = false
    })
    .finally((res) => {
      retMessage.value = res.data
      loading.value = false
    })
}
</script>